<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键触发</title>
		
	</head>
	<body>
		<div id="app">
			<!-- 需求：用户输入 按特殊的键触发函数
			 使num=num+输入的数-->
			<h3>用户数据：{{num}}</h3>
			<input type="text" v-model="num1" @keyup.enter='fun1()' placeholder="回车触发..." />
			
			
			<!-- 1.keyup 2.keydown 3.keypress -->
			<!-- esc tab delete space enter 
			 left right up down-->
			<!-- 弹起来事件用的多 因为按下去可能一直按着 -->
			<input type="text" v-model="num1" 
			
			@keyup.delete="num--"
			@keyup.space="fun1" @keyup.enter="fun1()"
			@keyup.tab="fun1()" @keyup.esc="fun1()"
			@keyup.left="fun2()" @keyup.down="fun2()" 
			@keyup.right="fun1()" @keyup.up="fun1()"
			
			 placeholder="右键上键增加 左键下键减少" />

		</div>

		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 100,
					num1: ''
				},
				methods: {
					fun1() {
						this.num += parseInt(this.num1)

					},
					fun2() {
						this.num -= parseInt(this.num1)
					},
					fun3() {

					},
					fun4() {

					}

				}

			})
		</script>
	</body>
</html>
